<template>
	<uni-collapse>
		<uni-collapse-item title="搜索框搜索" :open="false">
			<view class="content">
				<text class="text">
					<view class="search-container">
						<view class="form-row">
							<view class="form-item">
								<text class="label">性别</text>
								<uni-data-select v-model="formData.gender" :localdata="genderOptions"
									placeholder="选项" />
							</view>
							<view class="form-item">
								<text class="label">婚姻状态</text>
								<uni-data-select v-model="formData.maritalStatus" :localdata="maritalStatusOptions"
									placeholder="选项" />
							</view>
						</view>
						<view class="form-row">
							<view class="form-item">
								<text class="label">跟进状态</text>
								<uni-data-select v-model="formData.followStatus" :localdata="followStatusOptions"
									placeholder="选项" />
							</view>
							<view class="form-item">
								<text class="label">会员状态</text>
								<uni-data-select v-model="formData.memberStatus" :localdata="memberStatusOptions"
									placeholder="选项" />
							</view>
						</view>
						<view class="search-form">
							<view class="form-row">
								<view class="form-item">
									<text class="label">会员名称</text>
									<uni-easyinput v-model="formData.memberName" placeholder="请输入会员名称" />
								</view>
								<view class="form-item">
									<text class="label">手机号</text>
									<uni-easyinput v-model="formData.mobile" placeholder="请输入手机号" />
								</view>
							</view>

							<view class="form-row">
								<view class="form-item">
									<text class="label">出生年月</text>
									<uni-easyinput v-model="formData.birthDate" placeholder="请输入出生年月" />

								</view>
								<view class="form-item">
									<text class="label">老师</text>
									<uni-easyinput v-model="formData.teacher" placeholder="请输入老师姓名" />
								</view>
							</view>
							<view class="search-btn">
								<button type="primary" size="mini" @click="handleSearch">搜索</button>
								<button style="margin-left: 20px;" type="warn" size="mini" @click="rest">重置</button>
								<button style="margin-left: 20px;" type="error" size="mini" @click="adduser">增加</button>
								<button style="margin-left: 20px;" type="success" size="mini" @click="rest1">退出</button>
							</view>
						</view>
					</view>


				</text>
			</view>
		</uni-collapse-item>

	</uni-collapse>



	<view v-for="(item,index ) in datalist " :key="index" style="margin: 0 20px;">
		<uni-card :title="item.name" :sub-title="`联系方式:`+item.lianxi" :extra="`老师：`+item.laoshi" :thumbnail="item.image"
			v-if="item.sex == '女'" class="cards">
			<view style="display: flex;">
				<text style="font-size: 12px;width: 30vw;">
					<view>车:{{item.che==1?'有':'无'}}</view>
					<view>车贷:{{item.chedai==1?'有':'无'}}</view>
					<view>房产:{{item.fang==1?'有':'无'}}</view>
					<view>房贷:{{item.fangdai==1?'有':'无'}}</view>
					<view>身高:{{item.shengao}} cm</view>
					<view>体重:{{item.tizhong}} Kg</view>
				</text>
				<text style="font-size: 12px;">
					<!-- <view>登记时间:{{item.created_at}}</view> -->
					<view>民族:{{item.minzu}}</view>
					<view>生日:{{item.shengri}}</view>
					<view>生肖:{{item.shuxiang}}</view>
					<view>会员:{{item.vip==1?'是':'否'}}</view>
					<view>学历:{{item.xueli}}</view>
					<view>是否进店:{{item.isin==0?'否':'是'}}</view>

				</text>
			</view>
			<view style="margin-top: 20px;display: flex;flex-direction: row;align-items: center; justify-content: space-between;">
			  <button type="primary" size="mini" style="margin-right: 8px;white-space: nowrap" @click="fw(item)">跟进</button>
			  <button type="error" size="mini" style="margin-right: 8px; background-color:#ff4d4f; color:#fff;white-space: nowrap" @click="delinfo(item)">删除</button>
			  <button type="success" size="mini" style="margin-right: 8px; background-color:#52c41a; color:#fff;white-space: nowrap" @click="info(item)">信息</button>
			  <button type="success" size="mini" style="background-color:#1890ff; color:#fff;white-space: nowrap" @click="xiugai(item)">修改</button>
			</view>
		</uni-card>

		<uni-card :title="item.name" :sub-title="`联系方式:`+item.lianxi" :extra="`老师：`+item.laoshi" :thumbnail="item.image"
			v-if="item.sex == '男'" class="cards1">
			<view style="display: flex;">
				<text style="font-size: 12px;width: 30vw;">
					<view>车:{{item.che==1?'有':'无'}}</view>
					<view>车贷:{{item.chedai==1?'有':'无'}}</view>
					<view>房产:{{item.fang==1?'有':'无'}}</view>
					<view>房贷:{{item.fangdai==1?'有':'无'}}</view>
					<view>身高:{{item.shengao}} cm</view>
					<view>体重:{{item.tizhong}} Kg</view>
				</text>
				<text style="font-size: 12px;">
					<!-- <view>登记时间:{{item.created_at}}</view> -->
					<view>民族:{{item.minzu}}</view>
					<view>生日:{{item.shengri}}</view>
					<view>生肖:{{item.shuxiang}}</view>
					<view>会员:{{item.vip==1?'是':'否'}}</view>
					<view>学历:{{item.xueli}}</view>
					<view>是否进店:{{item.isin==1?'是':'否'}}</view>

				</text>
			</view>
			<view style="margin-top: 20px;display: flex;flex-direction: row;align-items: center; justify-content: space-between;">
			<button type="primary" size="mini" style="margin-right: 10px;white-space: nowrap" @click="fw(item)">跟进</button>
				<button type="error" size="mini" style="margin-right: 10px;background-color:#ff4d4f;color:#fff;white-space: nowrap" @click="delinfo(item)">删除</button>
				<button type="success" size="mini" style="background-color:#52c41a;color:#fff;white-space: nowrap" @click="info(item)">信息</button>
				<button type="success" size="mini" style="background-color:#52c41a;color:#fff;white-space: nowrap" @click="xiugai(item)">修改</button>
			</view>
		</uni-card>

	</view>

	<view style="margin: 30px;">
		<uni-pagination :total="pages.total" :current="pages.page" :pageSize="pages.limit" @change="handlePageChange" />
	</view>
	<view style="margin-bottom: 30px;">

	</view>
	<view>
		<uni-drawer ref="showRight" mode="right" :width="280">
<scroll-view scroll-y style="height: 100%;">
			<image style=" height: 100px; width: 60vw; background-color: #eeeeee;" mode="aspectFit"
				:src="userinfos.image" @click="previewImage(userinfos.image)">
			</image>

			<uni-table ref="table" :loading="loading" border stripe class="tables">
				<uni-tr>
					<uni-td>
						<view class="name">姓名</view>
					</uni-td>
					<uni-td align="center">{{ userinfos.name }}</uni-td>
				</uni-tr>


				<!-- 				<uni-tr>
					<uni-td>
						<view class="name">联系</view>
					</uni-td>
					<uni-td align="center">{{ userinfos.lianxi }}</uni-td>
				</uni-tr> -->

				<uni-tr>
					<uni-td>
						<view class="name">出生</view>
					</uni-td>
					<uni-td align="center">{{ userinfos.shengri }}</uni-td>
				</uni-tr>
				<!-- 				<uni-tr>
					<uni-td>
						<view class="name">生肖</view>
					</uni-td>
					<uni-td align="center">{{ userinfos.shuxiang }}</uni-td>
				</uni-tr> -->
				<uni-tr>
					<uni-td>
						<view class="name">老师</view>
					</uni-td>
					<uni-td align="center">{{ userinfos.laoshi }}</uni-td>
				</uni-tr>

				<uni-tr>
					<uni-td>
						<view class="name">车</view>
					</uni-td>
					<uni-td align="center">{{ userinfos.che==1?'有':'无' }}</uni-td>
				</uni-tr>
				<uni-tr>
					<uni-td>
						<view class="name">车贷</view>
					</uni-td>
					<uni-td align="center">{{ userinfos.chedai==1?'有':'无' }}</uni-td>
				</uni-tr>

				<uni-tr>
					<uni-td>
						<view class="name">房产</view>
					</uni-td>
					<uni-td align="center">{{ userinfos.fang==1?'有':'无' }}</uni-td>
				</uni-tr>
				<uni-tr>
					<uni-td>
						<view class="name">房贷</view>
					</uni-td>
					<uni-td align="center">{{ userinfos.fangdai==1?'有':'无' }}</uni-td>
				</uni-tr>

				<uni-tr>
					<uni-td>
						<view class="name">vip状态</view>
					</uni-td>
					<uni-td align="center">{{ userinfos.viptime }}</uni-td>
				</uni-tr>
				
				

				<!-- 				<uni-tr>
					<uni-td>
						<view class="name">身高</view>
					</uni-td>
					<uni-td align="center">{{ userinfos.shengao }}</uni-td>
				</uni-tr>
				<uni-tr>
					<uni-td>
						<view class="name">体重</view>
					</uni-td>
					<uni-td align="center">{{ userinfos.tizhong }}</uni-td>
				</uni-tr> -->

				<!-- 				<uni-tr>
					<uni-td>
						<view class="name">民族</view>
					</uni-td>
					<uni-td align="center">{{ userinfos.minzu }}</uni-td>
				</uni-tr> -->
				<!-- 				<uni-tr>
					<uni-td>
						<view class="name">学历</view>
					</uni-td>
					<uni-td align="center">{{ userinfos.xueli }}</uni-td>
				</uni-tr> -->
				<uni-tr>
					<uni-td>
						<view class="name">婚姻</view>
					</uni-td>
					<uni-td align="center" v-if="userinfos.hunyin ==1">离异</uni-td>
					<uni-td align="center" v-if="userinfos.hunyin ==0">单身</uni-td>
					<uni-td align="center" v-if="userinfos.hunyin ==2">丧偶</uni-td>
					<uni-td align="center" v-if="userinfos.hunyin ==3">短婚未育</uni-td>
				</uni-tr>
				<!-- 				<uni-tr>
					<uni-td>
						<view class="name">会员</view>
					</uni-td>
					<uni-td align="center">{{ userinfos.vip==1?'是':'否' }}</uni-td>
				</uni-tr> -->
				<uni-tr>
					<uni-td>
						<view class="name">登记</view>
					</uni-td>
					<uni-td align="center">{{ userinfos.created_at }}</uni-td>
				</uni-tr>
			</uni-table>
			<view style="margin: 10px;font-size: 12px;line-height: 24px;">
				<view>
					<view>父母情况:</view>
					<view style="background-color: #cdcdcd;">{{userinfos.fumu}}</view>
				</view>

				<view>
					<view>姐妹情况:</view>
					<view style="background-color: #cdcdcd;">{{userinfos.jiemei}}</view>
				</view>
				<view>
					<view>工作情况:</view>
					<view style="background-color: #cdcdcd;">{{userinfos.gongzuo}}</view>
				</view>
				
				<view>
					<view>兴趣爱好:</view>
					<view style="background-color: #cdcdcd;">{{userinfos.xingqu}}</view>
				</view>
				
				<view>
					<view>保险资料:</view>
					<view style="background-color: #cdcdcd;">{{userinfos.baoxian}}</view>
				</view>
				
				<view>
					<view>房贷月供:</view>
					<view style="background-color: #cdcdcd;">{{userinfos.yuegong}}</view>
				</view>
			</view>


			<view style="display: flex;">
				<view>
					<image style="width: 20vw; background-color: #eeeeee;" mode="aspectFit"
						:src="userinfos.image1" @click="previewImage(userinfos.image1)">
					</image>
					<image style="width: 20vw; background-color: #eeeeee;" mode="aspectFit"
						:src="userinfos.image2" @click="previewImage(userinfos.image2)">
					</image>
				<!-- </view> -->

				<!-- <view> -->
					<image style="width: 20vw; background-color: #eeeeee;" mode="aspectFit"
						:src="userinfos.image3" @click="previewImage(userinfos.image3)">
					</image>
					<image style="width: 20vw; background-color: #eeeeee;" mode="aspectFit"
						:src="userinfos.image4" @click="previewImage(userinfos.image4)">
					</image>
				</view>

			</view>
</scroll-view>
		</uni-drawer>
	</view>

	<!-- 右抽屉服务列表 -->
	<view>
		<uni-drawer ref="showRight1" mode="right" :width="280">
			<scroll-view scroll-y class="drawer-content" style="height: 100vh; max-height: 100vh; flex: 1;">
				<button class="mobile-btn" type="success" size="mini" @click="addfw">新增跟踪服务</button>
				<view v-for="(item, index) in fwlist" :key="index">
					<uni-card :extra="item.created_at" :thumbnail="avatar">
						<text class="uni-body">{{ item.info }}</text>
					</uni-card>
				</view>
			</scroll-view>
		</uni-drawer>
	</view>
	<!-- 弹出新增服务内容 -->
	<view>
		<!-- 提示信息弹窗 -->
		<uni-popup ref="message" type="dialog">
			<uni-popup-dialog ref="inputClose" v-model="inputValue" mode="input" title="输入内容" value="对话框预置提示内容!"
				placeholder="请输入内容" @confirm="dialogInputConfirm"></uni-popup-dialog>
		</uni-popup>
	</view>

</template>

<script setup>
	import {
		reactive,
		onMounted,
		getCurrentInstance,
		ref
	} from 'vue';
	const {
		proxy
	} = getCurrentInstance();
	let datalist = reactive([]);
	let userinfos = reactive([]);

	let pages = reactive({
		page: 1,
		limit: 10,
		total: 0
	})
	const inputValue = ref(''); // 绑定的输入值

	const adduser = ()=>{
		uni.navigateTo({
			url: '/pages/add/add'
		})
	}
	const dialogInputConfirm = (value) => {
		console.log('用户输入的值:', value);
		proxy.$http({
			url: '/userinfos/addinfo',
			method: 'POST',
			data: {
				field101: inputValue.value,
				uid: ids.value
			}
		}).then(r => {

			if (r.data.code == 10000) {
				proxy.$refs.message.close();
				proxy.$refs.showRight1.close();
				inputValue.value = '';

				uni.showToast({
					duration: 2000,
					title: '添加成功',
					icon: 'success'
				})

			}


		})
	};
	const showRight = ref(null);
	const showRight1 = ref(null);
	const message = ref(null);

	const previewImage = (url) => {
		uni.previewImage({
			current: url, // 当前图片（字符串）
			urls: [url] // 必须用数组包裹
		})
	}


	const addfw = () => {
		message.value.open()
		showRight1.value.close();


	}

	const rest = () => {
		formData.memberName = '';
		formData.mobile = '';
		formData.birthDate = '';
		formData.teacher = '';
		formData.followStatus = '';
		formData.memberStatus = '';
		formData.gender = '';
		formData.maritalStatus = '';
		pages.page = 1
		handleSearch()
	}
	const info = e => {

		showRight.value.open();
		userinfos = e
	}
	const formData = reactive({
		memberName: '',
		mobile: '',
		birthDate: '',
		teacher: '',
		followStatus: '',
		memberStatus: '',
		gender: '',
		maritalStatus: ''
	});
	// proxy.$http({
	// 	url: '/userinfos?name=' + formData.memberName + '&lianxi=' + formData.mobile + '&chusheng=' +
	// 		formData.birthDate + '&laoshi=' + formData.teacher + '&gx=' + formData.followStatus + '&sex=' +
	// 		formData.gender + '&vip=' + formData.maritalStatus + '&page'+pages.page+'&limit='+pages.limit,
	// 	method: 'GET',
	// }).then(r => {
	// 	console.log(r)
	// 	pages.total = r.data.data.count; 
	// 	pages.limit = r.data.data.limit;
	// 	pages.page = r.data.data.current;
	// 	// datalist.splice(0, datalist.length, ...r.data.data.data);
	// 	datalist.splice(0, datalist.length, ...r.data.data);
	// })

	let fwlist = reactive([])
	const ids = ref()
	const fw = e => {

		// userinfos/infos?id=7
		ids.value = e.id
		console.log(e)
		proxy.$http({
			url: '/userinfos/infos?id=' + e.id,
			method: 'GET',
		}).then(r => {
			console.log(r)
			fwlist.splice(0, fwlist.length, ...r.data.data);
			showRight1.value.open();
			// datalist.splice(0, datalist.length, ...r.data.data);
		})
		console.log(e)
		proxy.$http({
			url: '/userinfos/infos?id=' + e.id,
			method: 'GET',
		}).then(r => {
			console.log(r)
			fwlist = r.data.data
			showRight1.value.open();
			// datalist.splice(0, datalist.length, ...r.data.data);
		})
	}
	const handlePageChange = e => {
		console.log(e)
		pages.page = e.current
		handleSearch()

	}

	const followStatusOptions = [{
			value: '1',
			text: '30天未跟进'
		},
		{
			value: '0',
			text: '全部'
		}
	];

	const memberStatusOptions = [{
			value: '1',
			text: '正常'
		},
		{
			value: '2',
			text: '停用'
		}
	];

	const genderOptions = [{
			value: '1',
			text: '男'
		},
		{
			value: '0',
			text: '女'
		}
	];

	const maritalStatusOptions = [{
			value: '0',
			text: '单身'
		},
		{
			value: '1',
			text: '离异'
		},
		{
			value: '2',
			text: '丧偶'
		},
		{
			value: '3',
			text: '短婚未育'
		}
	];

	const handleSearch = () => {
		proxy.$http({
			url: '/userinfos?name=' + formData.memberName + '&lianxi=' + formData.mobile + '&chusheng=' +
				formData.birthDate + '&laoshi=' + formData.teacher + '&hunyin=' + formData.maritalStatus +
				'&sex=' +
				formData.gender + '&vip=' + formData.memberStatus + '&page=' + pages.page + "&limit=" + pages
				.limit,
			method: 'GET',
		}).then(r => {
			pages.total = r.data.count;
			pages.limit = r.data.limit;
			pages.page = r.data.current;
			datalist.splice(0, datalist.length, ...r.data.data);
		})

	};

	onMounted(() => {
		console.log(123123)
		handleSearch()
	})
	
	const delinfo = item => {
	    uni.showModal({
	        title: "提示",
	        content: "确定要删除该用户吗？",
	        success: function (res) {
	            if (res.confirm) {
	                // 这里执行删除操作
	                proxy.$http({
	                    url: '/phone/delinfo?id=' + item.id,
	                    method: 'GET',
	                }).then(r => {
	                    if (r.data.code == 10000) {
	                        uni.showToast({
	                            title: '删除成功',
	                            icon: 'success',
	                            duration: 2000
	                        });
	                        handleSearch();
	                    } else {
	                        uni.showToast({
	                            title: r.data.msg || '删除失败',
	                            icon: 'none',
	                            duration: 2000
	                        });
	                    }
	                });
	            }
	        }
	    });
	}
	const rest1 = () => {
			uni.setStorage({
				key: 'token',
				data: ''
			})
			uni.reLaunch({
				url: '/pages/index/index'
			})
	}
	
	const xiugai = e =>{
		uni.navigateTo({
		  url: '/pages/add/add?id='+e.id,
 
		});
	}
</script>

<style scoped>
page {
  height: auto;
}

	.uni-drawer {
		background: #ffffff;
		box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
	}

	.uni-drawer .uni-table {
		margin: 16px;
	}

	.uni-drawer .name {
		font-size: 14px;
		color: #666;
		font-weight: 500;
	}

	.uni-drawer .uni-table-td {
		padding: 2px 16px;
		font-size: 14px;
		color: #333;
	}

	.uni-drawer .uni-table-tr {
		border-bottom: 1px solid #f0f0f0;
	}

	.uni-drawer .drawer-content {
		padding: 16px;
	}

	.uni-drawer .mobile-btn {
		margin: 16px auto;
		display: block;
		background: #409eff;
		color: #fff;
		border-radius: 4px;
		padding: 8px 16px;
		font-size: 14px;
	}

	.uni-drawer image {
		margin: 8px;
		border-radius: 4px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}

	.search-container {
		padding: 20rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
	}

	.search-form {
		background: #ffffff;
		border-radius: 12rpx;
	}

	.form-row {
		display: flex;
		justify-content: space-between;
		margin: 30rpx;
	}

	.form-item {
		flex: 1;
		margin: 0 10rpx;
	}

	.label {
		display: block;
		font-size: 14px;
		color: #333333;
		margin-bottom: 16rpx;
		font-weight: 500;
	}

	.search-btn {
		margin: 40rpx;
		padding: 0 10rpx;
	}

	:deep(.uni-easyinput__content),
	:deep(.uni-date),
	:deep(.uni-data-select) {
		height: 96rpx;
		border: 1px solid #e5e5e5;
		border-radius: 12rpx;
		background-color: #ffffff;
		box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05);
	}

	:deep(.uni-date__x-input) {
		height: 78rpx;
	}

	:deep(.uni-input-input) {
		font-size: 14px;
	}

	:deep(.uni-button) {
		height: 88rpx;
		line-height: 88rpx;
		font-size: 16px;
		border-radius: 8rpx;
	}



	.search-container {
		padding: 20rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
	}

	.search-form {
		background: #ffffff;
		border-radius: 12rpx;
	}

	.form-row {
		display: flex;
		justify-content: space-between;
		margin: 30rpx;
	}

	.form-item {
		flex: 1;
		margin: 0 10rpx;
	}

	.label {
		display: block;
		font-size: 14px;
		color: #333333;
		margin-bottom: 16rpx;
		font-weight: 500;
	}

	.search-btn {
		margin: 40rpx;
		padding: 0 10rpx;
	}

	:deep(.uni-easyinput__content),
	:deep(.uni-date),
	:deep(.uni-data-select) {
		height: 96rpx;
		border: 1px solid #e5e5e5;
		border-radius: 12rpx;
		background-color: #ffffff;
		box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05);
	}

	:deep(.uni-date__x-input) {
		height: 78rpx;
	}

	:deep(.uni-input-input) {
		font-size: 14px;
	}

	:deep(.uni-button) {
		height: 88rpx;
		line-height: 88rpx;
		font-size: 16px;
		border-radius: 8rpx;
	}

	.cards {
		background: linear-gradient(-45deg, #f8f7d1 10%, #ffb5c5 80%);
		margin: 20rpx;
		border-radius: 26rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.12);
		
	}

	.cards1 {
		background: linear-gradient(-45deg, #b9c3eb 0%, #a1a5b2 100%);
		margin: 20rpx;
		border-radius: 16rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.12);
	}

	.uni-table-td {
		font-size: 20rpx;
		padding: 1rpx 10px;
	}

	.drawer-content {
		height: 100vh;
		max-height: 100vh;
		flex: 1;
		padding: 16px;
		overflow-y: auto;
	}

	.mobile-btn {
		margin: 10rpx 40rpx;
		width: 200rpx;
		display: inline-block;
		padding: 3rpx 24rpx;
		border-radius: 8rpx;
		/* 圆角 */
		background: #28a036;
		/* 蓝色背景 */
		color: white;
		font-size: 12px;
		text-align: center;
		border: none;
		cursor: pointer;
		transition: all 0.2s;
		/* 过渡动画 */
	}
</style>